<template>
    <div class="white-box">
        <applet-tip-auth v-if="appletGrant == 0" />
        <template v-else>
            <title-more title="通联支付设置" />
            <cell-tip show-more :datas="tipArrs" bottom="24px" />
            <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="210px">
                <el-form-item label="应用ID" prop="app_id" v-show="!showSecret">
                    <el-input v-model.trim="ruleForm.app_id" clearable placeholder="请输入收银宝应用ID" />
                    <div class="input-tips">收银宝应用ID</div>
                </el-form-item>
                <el-form-item label="应用ID" v-show="showSecret">
                    <p>{{ ruleForm.app_id }}</p>
                    <div class="input-tips">收银宝应用ID</div>
                </el-form-item>
                <el-form-item label="商户名称" prop="sh_name" v-show="!showSecret">
                    <el-input v-model.trim="ruleForm.sh_name" clearable placeholder="请输入商户名称" />
                    <div class="input-tips">微信商户名称</div>
                </el-form-item>
                <el-form-item label="商户名称" v-show="showSecret">
                    <p>{{ ruleForm.sh_name }}</p>
                    <div class="input-tips">微信商户名称</div>
                </el-form-item>

                <el-form-item label="商户号" prop="merchant_no" v-show="!showSecret">
                    <el-input v-model.trim="ruleForm.merchant_no" clearable placeholder="请输入小程序支付商户号" />
                    <div class="input-tips">小程序支付商户号，审核通过后，在微信发送的邮件中查看或者登录商户平台查看。</div>
                </el-form-item>
                <el-form-item label="商户号" v-show="showSecret">
                    <p>{{ ruleForm.merchant_no }}</p>
                    <div class="input-tips">小程序支付商户号，审核通过后，在微信发送的邮件中查看或者登录商户平台查看</div>
                </el-form-item>

                <el-form-item label="私钥" prop="pri_secret" v-show="!showSecret">
                    <el-input v-model.trim="ruleForm.pri_secret" type="textarea" :rows="6" clearable placeholder="请输入私钥" />
                    <div class="input-tips">通联支付私钥</div>
                </el-form-item>

                <el-form-item style="margin-top: 30px">
                    <el-button class="btn-submit" type="primary" :loading="form_loading" @click="submitForm(ruleRef)">保存</el-button>
                    <el-button class="btn-submit" type="warning" @click="resetForm(ruleRef)" v-if="showSecret">重置</el-button>
                    <el-button class="btn-submit" type="info" @click="toBackOne" v-else>不想修改？点击返回</el-button>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, onActivated } from "vue"
import { useBaseStore } from "@store/base"
import { onBeforeRouteLeave } from "vue-router"
import AppletTipAuth from "@components/AppletTipAuth.vue"
import CellTip from "@components/cell-tip.vue"
import TitleMore from "@components/title-more.vue"

const { proxy } = getCurrentInstance()

const storeBase = useBaseStore()
const appletGrant = 1
// const appletGrant = computed(() => {
//     return storeBase.user_auth_applet // 用户端小程序是否已经授权，0否，1是
// })

const tipArrs = [
    "请确保申请并注册好通联账号。",
    "重置：点击之后可重新配置",
]

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (from.name === "AppletAllinPay") {
        storeBase.setInclude("AppletAllinPay")
    }
    next()
})

onActivated(() => {
    getOneConfig()
})

onMounted(() => {
    getOneConfig()
})

/**
 * 添加通联支付信息
 * @param {Boolean} form_loading 按钮状态
 * @param {Array} ruleRef 表单规则
 * @param {Object} ruleForm  表单字段
 * @param {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const showSecret = ref(false)
const oldOneSecret = ref({})
const ruleRef = ref(null)
const ruleForm = reactive({
    sh_name: "", // 商户名称
    app_id: "", // 应用ID
    merchant_no: "", // 商户号
    pri_secret:'',
})
const ruleCheck = reactive({
    sh_name: [{ required: true, message: "请输入商户名称", trigger: "blur" }],
    app_id: [{ required: true, message: "请输入收银宝应用ID", trigger: "blur" }],
    merchant_no: [{ required: true, message: "请输入小程序支付商户号", trigger: "blur" }],
    pri_secret: [{ required: true, message: "请输入私钥", trigger: "blur" }],
})
// 提交
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                mch_title: ruleForm.sh_name,
                mch_id: ruleForm.merchant_no,
                allin_appid: ruleForm.app_id, // 收银宝应用ID
                apiclient_key: ruleForm.pri_secret, // 私钥
            }
            proxy.$axios
                .post("payment/allin", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "保存成功", type: "success" })
                        showSecret.value = true
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    showSecret.value = false
}
const toBackOne = () => {
    ruleForm.sh_name = oldOneSecret.value.sh_name
    ruleForm.merchant_no = oldOneSecret.value.merchant_no
    ruleForm.app_id = oldOneSecret.value.app_id
    showSecret.value = true
}
function getOneConfig() {
    proxy.$axios
        .get("payment/allinInfo")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                if (result) {
                    oldOneSecret.value.sh_name = ruleForm.sh_name = result.mch_title
                    oldOneSecret.value.merchant_no = ruleForm.merchant_no = result.mch_id
                    oldOneSecret.value.app_id = ruleForm.app_id = result.allin_appid
                    showSecret.value = true
                }
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "AppletAllinPay",
}
</script>

<style lang="less" scoped>
.el-form {
    margin-top: 30px;
}
.downs {
    margin-left: @margin-mdl;
}
:deep(.el-upload-list) {
    width: 500px;
    margin-top: 0;
}
.btn-submit {
    min-width: 100px;
    height: 36px;
}
</style>
